<%@ page language="java" import="java.util.*,SiTuQingYou.vo.*,SiTuQingYou.util.*" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
     <%
      String path = request.getContextPath();
    %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="<%=path%>/houtai/js/jquery-3.3.1.min.js"></script>
<style type="text/css">
 #yemian{
       padding:50px;
 }
 #deleteChecked{font-size:25px;}
 .pager a{
       display:inline-block;
       width:35px;
       height:35px;
       background-color:gray;
       color:white;
       text-align:center;
       line-height:35px;
       border-radius:18px;
       text-decoration:none;
 }
 
 .pager a.cur{
       background-color:green;
 }

 img{width:150px;height:150px;}
 .shoucang{width:1200px;height:154px;margin-top:18px;}
 .fuxuan {float:left;width:40px;}
 .tupian {float:left;width:150px;height:150px;}
 .neirong{float:left;background-color:#ddd;padding-left:40px;width:1008px;}
 .jingdian{height:90px;}
 .chengshi{height:20px;}
 .zhuti{height:40px;font-size:22px;}
  

</style>
</head>


<body>
      <jsp:include page="header.jsp"></jsp:include>
      
      <!-- 全选与单选复选框的关系start -->
      <script type="text/javascript">
          //***全选复选框选中，所有复选框就选中
          $(document).ready(function(){
        	  //给checkAll添加点击事件
        	  $("#checkAll").click(function(){
        		  //$(this)就是checkAll复选框
        		  var flag = $(this).prop("checked");//判断点击之后全选复选框是否被选中
        		  //全选复选框和ck复选框的checked需保持一致
        		  $("input[id=ck]").prop("checked",flag);
        	  })
        	
          })
      </script>
      <!-- 全选与单选复选框的关系end -->
      
      
      <!-- 全选后 一个取消点击，全选也会取消选中；全部逐一选中后，全选会选中 ：start-->
      <script type="text/javascript">
          $(document).ready(function(){
        	  $("input[id=ck]").click(function(){
        		  var flag = $(this).prop("checked");
        		  if(flag==false)
        		  {
        			  $("#checkAll").prop("checked",false);
        		  }
        		  else
        		  {
        			  var c1 = $("input[id=ck]").length;
        			  var c2 = $("input[id=ck]:checked").length;
        			  if(c1==c2)
        			  {
        				  $("#checkAll").prop("checked",true);
        			  }
        		  }
        		  
        	  })
          }) 
      </script>
      <!-- 全选后 一个取消点击，全选也会取消选中；全部逐一选中后，全选会选中 ：end-->
      
      
      <!-- 删除选中start -->
      <script type="text/javascript">
           $(document).ready(function(){
        	   $("#deleteChecked").click(function(){
        		   var cks = $("input[id=ck]:checked");
        		   if(cks.length==0){return;}
        		   var cids = "";
        		   cks.each(function(){
        			   var cid = $(this).attr("cid");//获得cid属性中的内容
        			   cids = cids+"&cid="+cid;
        		   })
        		   
        		   $.ajax({
        			   url:"<%=path%>/MyCollectionServlet",
        			   type:"post",
        			   data:"method=deleteAllChecked"+cids,
        			   async:false,
        			   success:function(mes){
        				   cks.each(function(){
        					   $(this).parent().parent().remove();
        				   })
        				   $("#HowManyData").html(mes);//更改记录数量
   
        			   }
        			   
        		   })
        	   })
           })
           
      </script>
      <!-- 删除选中end -->
      

<div id="yemian">
      <jsp:include page="/MyCollectionServlet"><jsp:param value="lookForAllCollection" name="method"/></jsp:include>
      <%
      ArrayList<LikeCollect> allStrategy = (ArrayList<LikeCollect>)request.getAttribute("allStrategy");
      %>
      <%
      Pager pager = (Pager)request.getAttribute("pager");
      %>
      <input id="checkAll" type="checkbox">当前页全选
      
          <%
             for(LikeCollect s:allStrategy)
             {%>
                
                     <div class="shoucang">
                          <div class="fuxuan"><input id="ck" cid="<%=s.getId()%>" type="checkbox"></div>
                          
                          <!-- 图片 -->
                          <div class="tupian">
                              <a href="<%=path%>/index/strategyinformation.jsp?id=<%=s.getStrategy().getId()%>">
                              <img src="<%=path%>/imagess/<%=s.getStrategy().getPhoto()%>">
                              </a>
                          </div>
                          <div class="neirong">   
                              <div class="zhuti"><a href="<%=path%>/index/strategyinformation.jsp?id=<%=s.getStrategy().getId()%>"><%=s.getStrategy().getTitle()%></a></div><!-- 攻略题目 -->
                              
                              <!-- 所属城市名 -->
                              <div class="chengshi">
                                                                                         所属城市：<a href="<%=path%>/index/cityscene.jsp?id=<%=s.getStrategy().getScene().getCity().getId()%>"><%=s.getStrategy().getScene().getCity().getCityname()%></a>
                              </div>
                              
                              <!-- 所属景点名 -->
                              <div class="jingdian">
                                                                                         所属景点：<a href="<%=path%>/index/sceneinfo.jsp?id=<%=s.getStrategy().getScene().getId()%>"><%=s.getStrategy().getScene().getScenename()%></a>
                              </div>
                          </div>
                     </div>
                
          <%} %>
      
      
      <!-- 显示页码 -->
      <div class="pager">
         <%
           for(int i=1;i<=pager.getPageCount();i++)
           {%>
              <a href="<%=path%>/index/collection.jsp?pageNum=<%=i%>" class=<%=(i==pager.getPageNum()?"cur":"")%>><%=i%></a>
           
          <%}%>
                         共<%=pager.getPageCount() %>页   共<span id="HowManyData"><%=pager.getDataCount() %></span>记录
      </div>
      <a id="deleteChecked" href="javascript:void(0);">删除选中</a>
</div>
<jsp:include page="footer.jsp"></jsp:include>
</body>
</html>